<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 包含公共顶部文件 -->

</head>

<body>

<!-- 背景视频 -->
<video autoplay loop muted playsinline id="background-video">
    <source th:src="@{/images/main_bg.mp4}" type="video/mp4" />
</video>
<header th:replace="common/top"></header>

<div id="BackLink">
    <a th:href="@{/productForm(productId=${session.product.productid})}"
       th:text="'Return to ' + ${session.product.productid}"></a>
</div>

<div id="Catalog">
    <table>
        <tr>
            <td th:utext="${session.product.descn}"></td>
        </tr>
        <tr>
            <td><b th:text="${session.item.itemid}"></b></td>
        </tr>
        <tr>
            <td>
                <b><font size="4" th:text="${session.item.attr1 + ' ' +
                                                session.item.attr2 + ' ' +
                                                session.item.attr3 + ' ' +
                                                session.item.attr4 + ' ' +
                                                session.item.attr5 + ' ' +
                                                session.product.name}"></font></b>
            </td>
        </tr>
        <tr>
            <td th:text="${session.product.name}"></td>
        </tr>
        <tr>
            <td>
                <span th:if="${session.item.quantity <= 0}">Back ordered.</span>
                <span th:if="${session.item.quantity > 0}"
                      th:text="${session.item.quantity} + ' in stock.'"></span>
            </td>
        </tr>
        <tr>
            <td th:text="'$' + ${#numbers.formatDecimal(session.item.listprice, 1, 2)}"></td>
        </tr>
        <tr>
            <td>
                <a style="color:orange;" class="Button"
                   th:href="@{/addItemToCart(workingItemId=${session.item.itemid})}">Add to Cart</a>
            </td>
        </tr>
    </table>
</div>

<!-- 包含公共底部文件 -->
<footer th:insert="common/bottom.html"></footer>

</body>
</html>


